<!-- src/views/Home.vue -->
<template>
  <div class="container">
    <nav class="sidebar">
      <div>
        <img src="../../src/images/logo.png" alt="">
      </div>
      <ul class="left_nav">
          <li 
              v-for="(item,index) in navList" 
              :key="index" 
              @mouseover="hover(index)" 
              @mouseout="navIndex=-1"
              >
              <router-link 
                tag="a" 
                :to="item.path" 
                :class="{'active':navIndex === index}"
              >
                {{item.title}}
              </router-link>
          </li>
      </ul>
    </nav>
    <main class="content">
      <Top></Top>
      <h1>内容区域</h1>
      <!-- <Audio></Audio> -->
    </main>
  </div>
</template>

<script setup>
// 如果需要在 Home 页面处理逻辑可以在这里写
import Audio from '../components/audio.vue'
import Top from '../components/top.vue';
import { ref, reactive } from 'vue'

let navIndex = ref(0)
const navList = reactive([
    { title: '首页', path: '/' },
    { title: 'AI作曲', path: '/aimusic' },
    { title: '我的创作', path: '/myworks' },
    { title: 'AI模型库', path: '/aimodel' },
    { title: '商城', path: '/shop' }
])

function hover(index) {
    console.log(index)
    navIndex.value = index
}

</script>

<style scoped>
.container {
  display: flex; 
  min-height: 100vh; 
  background: linear-gradient(180deg, rgba(30, 30, 64, 1) 0%, rgba(32, 32, 50, 1) 100%);
}

.sidebar {
  width: 200px; 
  background: linear-gradient(180deg, rgba(42, 42, 65, 1) 0%, rgba(71, 73, 83, 1) 100%);
  color: white; 
  padding: 10px;
  box-sizing: border-box;
  min-height: 100vh; /* 最小高度为视口高度，确保撑满 */
}

.content {
  flex: 1; /* 自动填充剩余空间 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.left_nav {
    width: 100%;
    margin-top: 50px;
    /* background-color: brown; */
    padding-bottom: 40px;
    border-bottom: 1px solid #5a5c6c;
}

.left_nav li {
    width: 100%;
    font-size: 22px;
    padding: 5px 0;
    box-sizing: border-box;
    margin-bottom: 1px;
    
}

.left_nav li a {
    height: 40px;
    line-height: 40px;
    padding:0px 20px;
    color: #fff;
    display: block;
    position: relative;
    border-radius: 10px;
    display: block;
    transition: all .5s;
}

.left_nav li .active {
    background-color: #636672;
}

</style>
